<template>
    <div class="app-container falseTabel-container">
        <div class="customContainer">
            <!-- 表格 -->
            <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small" @row-click="tableClick">
                <el-table-column align="center" label="序号" width="100">
                    <template slot-scope="scope">
                        <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="礼品名称" prop="name"></el-table-column>
                <el-table-column align="center" label="礼品图片" width="200">
                    <template slot-scope="scope">
                        <p style="display:block;height:90px;padding-top:5px;"  v-for="item in scope.row.list" :key="item.id">
                            <span v-viewer="options" style="display:block;width:80px;height:80px;margin: 0 auto;" class="images fit">
                                <img :src="item.thumb" :data-source="item.img" class="image" :key="item.img"/>
                            </span>
                        </p>    
                        <!-- <p style="display:block;height:90px;padding-top:5px"  v-for="item in scope.row.list" :key="item.id">
                            <vue-preview class="preview audit" :slides="item.imgList"></vue-preview>
                        </p>     -->
                    </template>
                </el-table-column>
                <el-table-column align="center" label="批量操作">
                    <el-table-column align="center"  width="500" :render-header="renderLeftHeader">
                        <template slot-scope="scope">
                            <div class="checkbox_div" style="height:90px;padding:25px 0 0 0" v-for="(item,i) in scope.row.list" :key="item.id">
                                <div style="height:60px">
                                    <el-checkbox v-model="item.isPass" @change="resetChecked(i)" label='通过' true-label="1" false-label="0">
                                    </el-checkbox>
                                    <!-- <el-checkbox-group v-model="item.isUsed" :disabled="item.isPass!=1" style="display:inline-block;margin-left:55px">
                                        <el-checkbox label="使用图片" true-label="1" false-label="0"></el-checkbox>
                                        <el-checkbox style="margin-left:58px" label="加入收藏夹" true-label="0" false-label="1"></el-checkbox>
                                    </el-checkbox-group> -->
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" width="500" :render-header="renderRightHeader">
                        <template slot-scope="scope">
                            <div class="checkbox_div" style="height:90px;padding:25px 0 0 5px" v-for="(item,i) in scope.row.list" :key="item.id">
                                <div style="text-align:left;padding-left:45px">
                                    <el-checkbox v-model="item.isPass" @change="resetChecked(i)" style="margin-right:125px" label='不通过' true-label="0" false-label="1">
                                    </el-checkbox>
                                    <el-autocomplete 
                                    class="inline-input" :disabled="item.isPass!=0||item.isPass==''" 
                                    v-model="item.remark"                  
                                    :fetch-suggestions="querySearch"
                                    placeholder="输入/选择不通过原因"
                                    
                                    :maxlength="inputLen"
                                    ></el-autocomplete>
                                </div>
                            </div>
                        </template>                        
                    </el-table-column>
                </el-table-column>
            </el-table>
            <!-- 弹框 -->
            <el-dialog width="500px" title="提示" :visible.sync="addhouseDialog">
                <div style="text-align: center">确认提交后将保存配置参数并返回礼品图片审核页</div>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click='submit'>确认</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-button class="pull-right" type="primary" size="small" @click="dialog">确认提交</el-button>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        submitList,
    } from "@/api/information/batchAudit";
    export default {
        data() {
            return {
                list: [],
                listLoading: false,
                addhouseDialog:false,
                inputLen:30,
                imgList: [],
                allPass:'',
                allNoPass:'',
                allUsed:"",
                allCause:"",
                isUsed:'',
                options: {  //预览图配置
                    toolbar: true,
                    url: 'data-source'
                },
                isFirstCreate:0,//组件是否第一次创建
                isWatch:true, //是否需要监听全选按钮变化
                imgCount:0, //图片总数
                currentListNo:0,
                route:{name:"information/batchAudit"},
                formInline: {
                    id_list: []
                },
                saveData:[],
                cause:[{value:'图片不清晰'},{value:"图片与实物不符"},{value:"图片损坏"}]
            }
        },
        created() {
            this.fetchData()
        },
        methods: {
            //左边表头
            renderLeftHeader(h,{column}){
                var self=this;
                return h(
                    'div',
                    {style:"display:flex;justify-content:space-around;"},
                    [ 
                        h('div',{},[
                            h('el-checkbox',{ props: { label:"批量通过","true-label":"1","false-label":"", value:self.allPass==='1' },
                                on:{
                                    change: ($event, column) => {
                                        //console.log($event, column.target.value, column.target.checked)
                                        self.isWatch=false;
                                        if(self.allPass==="1"){
                                            self.allPass="";
                                            self.allCheck("isPass","")
                                            // self.allCheck("isUsed","")
                                        }else{
                                            self.allPass="1"
                                            self.allNoPass=""
                                            self.allCause=""
                                            self.allCheck("isPass","1")
                                            this.allCheck("remark","")
                                        }                                   
                                    }                                   
                                }
                            }),
                            // h('el-checkbox',{
                            //     props:{label:"批量使用图片","true-label":"1",value:self.allUsed==="1",disabled:self.allNoPass==="1"||self.allPass==="" },      
                            //     on:{
                            //         change: () => {
                            //             self.isWatch=false;
                            //             if(self.allUsed==="1"){
                            //                 self.allUsed=""
                            //                 self.allCheck("isUsed","")
                            //             }else{
                            //                 self.allUsed="1"
                            //                 self.allCheck("isUsed","1")
                            //             }                            
                            //         }
                            //     }
                            // }),
                            // h('el-checkbox',{
                            //     props:{label:"批量加入收藏夹", value:self.allUsed==="0","true-label":"0",disabled:self.allNoPass==="1"||self.allPass===""},
                            //     on:{
                            //         change: ($event, column) => {
                            //             if(self.allUsed==="0"){
                            //                 self.allUsed=""
                            //                 self.allCheck("isUsed","")
                            //             }else{
                            //                 self.allUsed="0"
                            //                 self.allCheck("isUsed","0")
                            //             }                                
                            //         }
                            //     }
                            // }),                           
                        ]),
                    ],
                )
            },
            //右边表头
            renderRightHeader(h,{column}){
                var self=this;
                return h(
                    'div',
                    {style:"display:flex;justify-content:space-around;height:50px;align-items:center;",class:"table_input"},
                    [ 
                        h('el-checkbox',{ props: { label:"批量不通过","true-label":"0","false-label":"", value:self.allNoPass==='1'},
                            on:{
                                change: ($event, column) => {
                                    if(self.allNoPass==="1"){
                                        self.allNoPass=""
                                        self.allCheck("isPass","")
                                    }else{
                                        self.allNoPass="1"
                                        self.allPass=""
                                        // self.allUsed=""
                                        self.allCheck("isPass","0")
                                        // self.allCheck("isUsed","")
                                    }                                   
                                }                                
                            }
                        }),
                        h('el-autocomplete',{
                            props:{class:"inline-input",placeholder:"输入/选择不通过原因","fetch-suggestions":self.querySearch,maxlength:self.inputLen,value:self.allCause},      
                            on:{
                            input: ($event) => self.handleCause($event), // 选中事件 $event, column，这里$event=true,column是input的dom当在select里打印的时候
                            }
                        })                                            
                    ],
                )
            },
            // 列表获取
            async fetchData() {
                this.listLoading = true;
                this.currentPage = 1;
                this.imgCount=0;
                try{
                    this.formInline.id_list=this.$store.getters.addBatchAudit;
                    this.list = await getList(this.formInline)
                    this.list.forEach(val => {
                        for(var item of val.list){
                            this.$set(item,"isPass","");
                            this.imgCount++;
                            item.thumb=item.img+this.$store.getters.getThumbnailImg;
                        }
                    });
                    // console.log(this.list)
                    this.listLoading = false;
                }catch(err){
                    this.$message.error(err);
                    this.listLoading=false;
                }
            },
            //当点击是否通过选项框时重置isPass或cause
            resetChecked(i){
                this.isWatch=true;
                //console.log(i,this.list[this.currentListNo].list)
                if(this.list[this.currentListNo].list[i].isPass==1){
                    this.list[this.currentListNo].list[i].remark="";
                    //console.log(i,this.list[this.currentListNo].list)
                    //直接用.设置属性不会双向绑定
                    // this.$set(this.list[this.currentListNo].list[i],"cause","")
                }
                // else{
                //     // this.auditList[i].isUsed=""
                //     this.$set(this.list[this.currentListNo].list[i],"isUsed","")
                // }
            },
            tableClick(row){
                this.isWatch=true;
                for(var i in this.list){
                    if(this.list[i].name==row.name){
                        this.currentListNo=i;
                    }
                }
            },
            // handleSelect(item) {
            //     console.log(item);
            // },
            querySearch(queryString, cb) {
                var cause = this.cause;
                var results = queryString ? cause.filter(this.createFilter(queryString)) : cause;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            handleCause($event){
                this.allCause=$event;
                this.allCheckCause("remark",$event)
            },
            createFilter(queryString) {
                return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            //弹窗
            dialog(){
                this.saveData=[];             
                for(var i in this.list){
                    this.saveData.push({up_id:this.list[i].list[0].up_id,pass:[],refuse:[]});
                    for(var item of this.list[i].list){
                        //console.log(item);
                        if(!item.isPass&&(item.isPass==0&&!item.cause)){
                            this.$message.error("请完善审核信息！");
                            return ;
                        }
                        if(item.isPass==="1"){
                            this.saveData[i].pass.push(item.id);
                            // console.log(this.saveData[i].pass)
                            // if(item.isUsed==="1"){
                            //     this.saveData[i].is_use.push(item.id);
                            // }else if(item.isUsed==="0"){
                            //     this.saveData[i].fav.push(item.id)
                            // }
                        }
                        else if(item.isPass==="0"){
                            this.saveData[i].refuse.push({id:item.id,remark:item.remark});
                        }                     
                    }
                }  
                this.addhouseDialog=true;
                // this.saveData=JSON.stringify(this.saveData);
            },
            //提交
            async submit(){
                // for(var i in this.list){
                //     for(var item of this.list[i].list){
                //         //console.log(item);
                //         if(item.isPass==1){
                //             arr["id"]=item.id;
                //             arr["remark"]="";
                //             this.saveData[i].pass.push(arr);
                //             //console.log(this.saveData[i].pass)
                //             if(item.isUsed==1){
                //                 this.saveData[i].is_use.push(item.id);
                //             }else{
                //                 this.saveData[i].fav.push(item.id)
                //             }
                //         }
                //         else{
                //             var arr=[];
                //             arr["id"]=item.id;
                //             arr["remark"]=item.cause;
                //             this.saveData[i].refuse.push(arr);
                //         }
                //     }
                // }
                //console.log(this.saveData);
                this.addhouseDialog=false;
                let data={list:this.saveData}
                data=JSON.parse(JSON.stringify(data))
                try{
                    let response=await submitList(data)
                    if(response.code==1){
                        this.$message({ type: 'success', message: response.message });
                        //console.log(this.$store.state.tagsview.visitedviews)
                        // var routes=this.$store.state.tagsview.visitedviews;
                        // var route=routes.filter(item => { return item.name == "information/batchAudit" });
                        this.$store.dispatch('delVisitedViews', this.route).then((views) => {
                            this.$store.commit("changeIsBatch",1)
                            this.$router.push({ name: "information/audit" });                    
                        })
                    }
                }catch(err){
                    let pass=err.pass_id;
                    for(let id of pass){
                        for(let i in this.list){
                            if(this.list[i].list[0].up_id==id){
                                //console.log(this.list[i])
                                this.list.splice(i,1)
                                this.$store.commit("addBatchIdList",err.no_pass) 
                            }
                        }
                    }
                }    
            },
            //判断是否全选
            getCount(key,isTrue){
                let trueCount=0;
                let falseCount=0;
                for(let giftItem of this.list){
                    for(let imgItem of giftItem.list){
                        if(imgItem[key]==="1")
                            trueCount++
                        else if(imgItem[key]==="0")
                            falseCount++
                    }
                }
                if(isTrue)
                    return trueCount==this.imgCount?"1":"";
                else
                    return falseCount==this.imgCount?"1":""; 
            },
            //全选
            allCheck(key,val){
                for(let giftItem of this.list){
                    for(let imgItem of giftItem.list){
                        this.$set(imgItem,key,val);
                    }
                }
            },
            //批量选填不通过原因
            allCheckCause(key,val){
                for(let giftItem of this.list){
                    for(let imgItem of giftItem.list){
                        // console.log(imgItem)
                        if(imgItem.isPass==="0"&&!imgItem.remark){
                            // this.$set(imgItem,key,val);
                            imgItem.remark=val;
                        }
                    }
                }
            },

        },
        computed:{
            //配合watch监听数组中对象属性值的变化
            "isPassCount":function(){
                return this.getCount("isPass",true);
            },
            // "isUsedCount":function(){
            //     return this.getCount("isUsed",true);
            // },
            // "isNoUsedCount":function(){
            //     return this.getCount("isUsed",false);
            // },
            "isNOPassCount":function(){
                return this.getCount("isPass",false);
            }
        },
        watch:{
            isPassCount(val){
                this.allPass=val;
            },
            isNOPassCount(val){
                this.allNoPass=val;
            },
            // isUsedCount(val){
            //     this.allUsed=val;
            // },
            // isNoUsedCount(val){
            //     if(val==1)
            //         this.allUsed="0";
            //     else if(this.isWatch){
            //         this.allUsed="";
            //     }
            // },
        },
        activated(){
            this.isFirstCreate++;
            if(this.$store.getters.getIsBatch==1&&this.isFirstCreate>1){
                this.allPass='',
                // this.allNoPass='',
                // this.allUsed="",
                this.allCause="",
                this.fetchData();
            }
            this.$store.commit("changeIsBatch",0)
        },
        // deactivated(){
        //     if(this.$store.getters.getIsBatch==1&&this.isFirstCreate>1){
        //         this.$store.commit("changeIsBatch",0)
        //     }
        // }
    }
</script>
